<template>
  <div>
    <p class="noListHint" v-if="!showList">没有岗位</p>
    <scroll-view
      v-else
      class="scroll-wrap no-scroll-bar"
      style="height:calc(100%-40px)"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <div v-for="(item,idx) in showList" :key="idx" class="goods-block">
        <div class="leftBox">
          <!-- <i-checkbox-group> -->
          <i-checkbox
            :checked="item.isBool"
            position="left"
            color="#5b94f6"
            @change="handleFruitChange(item)"
          ></i-checkbox>
          <!-- </i-checkbox-group> -->
          <div class="left">
            <p>{{item.roleName}}</p>
            <span>{{item.role}}</span>
          </div>
        </div>
        <div class="right">
          <span class="state">
            <img
              src="https://akk.028wkf.cn/kdb-weapp-img/icon/dpgl.png"
              mode="scaleToFill"
              @click="linkClikc(item)"
            />
          </span>
        </div>
      </div>
      <!-- <p v-if="alreadyLastPage" class="end-tip">没有更多了</p> -->
    </scroll-view>
    <button class="btn" @click="btnLinkClikc">完成</button>
  </div>
</template>

<script>
import { SHOP_ROLE_PAGE, FIND_ROLE_INFO_API, SHOP_ADMIN_ADD } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      showList: [],
      currentPage: 1,
      alreadyLastPage: false
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.showList = []
    this.getAdminList()
  },
  methods: {
    handleFruitChange (item) {
      item.isBool = !item.isBool
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.getGoodsList()
      }
    },
    linkClikc (item) {
      const vm = this
      vm.$router.push(
        `/pages/mine/admin-manage/profession/professionUpdate/main?item=${JSON.stringify(
          item
        )}`
      )
    },
    btnLinkClikc () {
      const vm = this
      let roleIds = []
      vm.showList.forEach(_ => {
        if (_.isBool) {
          roleIds.push(_.roleId)
        }
      })
      let params = { ...vm.$cookie.get('newSonAdminForm') }
      params.roleIds = roleIds
      params.shopId = vm.$store.state.account.shopId
      // params.shopId = '56'
      vm.addDate(params)
      // if () {

      // }
    }, // 新建岗位
    getAdminList () {
      const vm = this
      let params = {
        shopId: vm.$store.state.account.shopId
        // shopId: '56'
      }
      SHOP_ROLE_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            list.forEach(_ => {
              _.isBool = false
              FIND_ROLE_INFO_API(_.roleId)
                .then(r => {
                  if (r.data.code === '0') {
                    let lis = []
                    r.data.data.shopMenus.forEach(e => {
                      lis.push(e.menuName)
                    })
                    _.role = `权限：${lis.join()}`
                    _.shopMenus = r.data.data.shopMenus
                  } else {
                    vm.$toast(r.data.message)
                  }
                })
                .catch(e => {
                  console.error(e)
                })
            })
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      const vm = this

      if (isFirst) {
        vm.showList = list
        if (isLast || !list.length) {
          // only one page
          vm.alreadyLastPage = true
        } else {
          // has next page
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        vm.showList.push(...list)
        vm.alreadyLastPage = true
      } else {
        // middle page
        vm.showList.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    },
    addDate (params) {
      const vm = this
      SHOP_ADMIN_ADD(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('保存成功', '').then(() => {
              vm.$router.go(-2)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    updateData () {}
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.noListHint {
  font-size: 16px;
  color: #000;
  height: calc(100%-40px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods-block {
  width: 90%;
  padding: 15px 10px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  .leftBox {
    display: flex;
    align-items: center;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        color: #000;
        font-size: 16px;
      }
      span {
        color: #666;
        font-size: 13px;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    img {
      width: 20px;
      height: 18px;
      margin-left: 5px;
    }
  }
}
.btn {
  width: 95%;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  font-size: 14px;
  border-radius: 25px;
  background: #626efd;
}
</style>
